* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$bg-color: #b7d4a8;

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  font:bold 20px 'Courier';
  
  @media (max-width:1000px){
    justify-content: flex-start;
  }
}

main {
  width: 360px;
  height: 420px;
  background-color: $bg-color;
  border: 10px solid black;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  align-items: center;
  justify-content: space-around;
 
  @media (max-width:1000px) {
    justify-self: flex-start;
    margin-top: 5vh;
    
  }
  .stage {
    width: 304px;
    height: 304px;
    border:2px solid black;
    position: relative;
    #snake{
      &>div{
        width: 10px;
        height: 10px;
        border:1px solid $bg-color;
        background-color: #000;
        position: absolute;
      }
    }
    #food{
      
      position: absolute;
      left: 100px;
      display: flex;
      gap:1px;
      width: 10px;
      flex-wrap: wrap;
      left: 80px;
      top: 40px;
      span{
        display: inline-block;
        width: 3px;
        height: 3px;
        background-color: black;
        transform: rotate(45deg);
      }
    }
  }
  .score-panel{
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
  }
}

$btn-width:4rem;
.controler{
  display: none;
}
@media (max-width:1000px) {
  .controler{
    margin-top: 20px;
    display: block;
    width: $btn-width;
    position: relative;
    i{
      font-size: $btn-width;
      
    }
    
    i:nth-child(2){
      left: $btn-width;
      position: absolute;
      top: $btn-width;
    }
    i:nth-child(3){
      right: $btn-width;
      position: absolute;
      top: $btn-width;
    }
    i:nth-child(4){
      top: $btn-width*2;
      left: 0;
      position: absolute;
    }
  }
}
